<!--头部开始-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <title>通用后台管理系统</title>
    <meta name="referrer" content="never">
    <link rel="stylesheet" href="./layui/css/layui.css" />
    <script src="./layui/jquery-1.11.2.min.js"></script>
    <script src="./layui/layui.js"></script>
    <script>
        layui.use('element', function() {
            var element = layui.element;
            element.on('nav(demo)');
        });
    </script>
    <style>
        .layui-side{width:150px;}
        .layui-side-scroll{
            width:150px;
        }
        .layui-nav-tree{
            width:150px;
        }
        .layui-body{
            left:170px;
        }

        .logo{
            background-color:#2F4056;
            padding:10px 20px;
        }

        .site_h1{
            margin-bottom: 20px;
            line-height: 40px;
            color: #393D49;
            border-bottom: 1px solid #eee;
            font-size: 16px;
            font-weight: 300;
            float:left;width:100%;
        }
        .fl{
            float:left;
        }
        .fr{
            float:right;
        }
        .mr50{
            margin-right:50px;
        }
        .f12{
            font-size:12px;
        }
        </style>
</head>
<!--头部结束-->
<!--导航开始-->
<body>
<div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
        <div class="logo" style="background-color:#2F4056;padding:10px 20px;">管理后台</div>
        <ul class="layui-nav layui-nav-tree" lay-filter="menu">
            <li class="layui-nav-item" >
                <a href="#">首页</a>
            </li>
            <li class="layui-nav-item" >
                <a href="javascript:;">栏目</a>
                <dl class="layui-nav-child">
                    <dd><a href="#"  >子栏目</a></dd>
                    <dd><a href="#"  >子栏目</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" >
                <a href="javascript:;">栏目</a>
                <dl class="layui-nav-child">
                    <dd><a href="#"  >子栏目</a></dd>
                    <dd><a href="#"  >子栏目</a></dd>
                </dl>
            </li>
        </ul>
    </div>
</div>
<div class="layui-body">
    <h1 class="site_h1">
        <div class="fl">栏目名字</div>
        <div class="fr mr50 f12">总管理员&nbsp;&nbsp;(<a style="color:#1E9FFF;" href="#">退出</a>)</div>
    </h1>
<!--导航结束-->
<!--内页开始-->
    <div class="content">
        <div class="search">
            <form action="#" class="layui-form" method="get">
                <div class="layui-form-item">
                    <div class="line">
                        <div class="layui-input-inline">
                            <select name="status">
                                <option value="100">全部状态</option>
                                <option value="1"  >有效</option>
                                <option value="0"  >无效</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" placeholder="昵称" name="nickname" value=""/>
                        </div>
                        <div class="layui-input-inline btnk">
                            <button class="layui-btn" lay-submit lay-filter="formSearch">搜索</button>
                            <a href="javascript:;" class="layui-btn layui-btn-normal editp" data-id="">新增</a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="list">
            <table class="layui-table">
                <thead>
                <tr>
                    <th>表头</th>
                    <th>表头</th>
                    <th>表头</th>
                    <th>表头</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>内容</td>
                    <td>内容</td>
                    <td>内容</td>
                    <td>内容</td>
                    <td>
                        <a href="javascript:;" data-id="1" class="layui-btn layui-btn-sm layui-btn-normal editp">编辑</a>
                    <a href="javascript:;" data-id="1" class="layui-btn layui-btn-sm layui-btn-normal dels">删除</a></td>
                </tr>
                <tr>
                    <td colspan="18" id="pageshow"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>
<!--编辑弹窗层开始-->
<div id="template" style="display: none;">
    <form class="layui-form" lay-filter="formMain" action="" style="width:600px;margin:30px;">
        <div class="layui-form-item">
            <label class="layui-form-label">昵称</label>
            <div class="layui-input-block">
                <input type="text" name="nickname" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="mobile" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">Logo</label>
            <div class="layui-input-block">
                <img src="" id="logo" /><Br/>
                <input type="hidden" name="logo" value=""/>  <!--用于提交表单-->
                <button type="button" class="layui-btn" id="uploadlogo">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formSub">确认</button>
                <input type="hidden" name="id" value="" />
            </div>
        </div>
    </form>
</div>
<!--编辑弹窗层结束-->
<script type="text/javascript">
    layui.use(['layer','form','laypage','upload'], function() {
        var layer = layui.layer,laypage = layui.laypage,form=layui.form,upload = layui.upload
        // 列表分页
        laypage.render({
            elem: 'pageshow'
            ,count : 100             // 信息总数。动态变量
            ,limit: 10               // 每页显示的条数
            ,groups: 5               // 连续显示分页数
            ,curr: function(){
                var page = location.search.match(/page=(\d+)/);
                return page ? page[1] : 1;
            }(),
            jump: function(e, first){
                if(!first){
                    var page = location.search.match(/page=(\d+)/);
                    p = page ? page[1] : 1;
                    location.href= location.href.indexOf('page=')>0 ? location.href.replace('page='+p,'page='+ e.curr) : (location.href.indexOf('?')>0 ? location.href+'&page='+ e.curr : location.href+'?page='+ e.curr);
                }
            }
        });
        // 编辑和新增功能初始化
        $('.editp').click(function(){
            var id = $(this).attr('data-id');
            layer.open({
                type:1,                         // 弹窗类型
                content:$('#template').html(),  // 获取弹窗层元素
                maxmin:true,                    // 是否允许最大化
                title:'弹窗标题',
                area:["800px"],         // 弹窗宽和高
                success:function(){
                    var _index =layer.load(2);
                    // 编辑功能，先获取信息详情，给表单赋初始值
                    if(id!= ""){
                        $.ajax({                      // 发ajax请求填充表单默认值
                            url:'#',
                            data:{id:id},
                            dataType:'json',
                            type:'get',
                            success:function(res){
                                if(res.status  == 1){            // 请求失败提示
                                    layer.msg(res.info,{icon:2});
                                    layer.close(_index);
                                }else{
                                    var _detail = res.data;
                                    form.val('formMain',{       // 请求成功则填充表单
                                        "id":_detail.id,
                                        "nickname":_detail.nickname,
                                        "mobile":_detail.mobile,
                                    });
                                    layer.close(_index);        // 关闭加载框
                                }
                            }
                        })
                    }else{
                        // 新增功能，表单初始值为空
                        form.val('formMain',{         // 表单赋予默认值
                            "id":"",
                            "nickname":"",
                            "mobile":"",
                        });
                        layer.close(_index);
                    }
                }
            })
        });

        // 上传图片功能
        var uploadInst = upload.render({
            elem: '#uploadlogo'           // 绑定元素
            ,url: 'uploadPic.php'        // 上传接口Url
            ,done: function(res){
                $('#logo').attr('src',res.data.picurl);     // 显示上传的图片
                $('input[name="logo"]').val(res.data.picurl);   // 表单中name=logo的input文本写入图片地址
            }
            ,error: function(){
                //请求异常回调
            }
        });
        // 隐藏表单提交表单(新增和更新)
        form.on('submit(formSub)',function(data){
            console.log(data.field);
            $.ajax({
                url:'#',
                data:data.field,
                dataType:'json',
                type:'post',
                success:function(res){
                    if(res.status  == 1){
                        // 失败弹出提示
                        layer.msg(res.info,{icon:2});
                    }else{
                        // 成功弹出提示信息并刷新页面
                        layer.msg(res.info,{icon:1},function(){
                            window.location.reload();
                        });
                    }
                }
            })
            return false;
        })
        // 删除功能
        $('.dels').click(function(){
            layer.confirm('请再次确认',function(){
                var _id = $(this).attr('data-id');
                if(_id == ''){
                    var _index = layer.msg('操作成功',{icon:1},function(){
                        layer.close(_index);
                    })
                }else {
                    $.ajax({
                        url: '#',
                        data: {id: _id},
                        dataType: 'json',
                        type: 'get',
                        success: function (res) {
                            if (res.status  == 0) {
                                layer.msg('操作成功', {icon: 1}, function () {
                                    // 删除成功并刷新页面
                                    window.location.reload();
                                })
                            } else {
                                layer.msg(res.info, {icon: 2});
                            }
                        }
                    })
                }
            });
        });
    });
</script>
<!--内页结束-->
</body>
</html>